<template>
<view>
<!--pages/topicality/zhuanti/zhuanti.wxml-->
<!-- <import src="../../webview/contact.wxml" /> -->
<!--<import src="../../topicality/zhuanti/ztmodel.wxml"></import>-->
<!-- <template is="inContact" data="{{showtk}}" /> -->


<view>
  <!-- 专题顶部 -->
  <view>
    <image :src="infoData.bgimg" class="main-img">
    </image>
    <view class="city-box">
      <text>{{city}}</text>
    </view>
    <view class="change-city">
      <text style="margin-left: 70rpx;">切换城市:</text>
      <picker @change="bindProv" :value="pindex" :range="provPick">
        <view class="sel-city">
          <view class="picker">
            <text>{{provPick[pindex]}}</text>
          </view>
          <image src="/static/images/dwicon.png"></image>
        </view>
      </picker>
      <picker @change="bindCity" :value="cindex" :range="cityPick">
        <view class="sel-city">
          <view class="picker">
            <text>{{cityPick[cindex]}}</text>
          </view>
          <image src="/static/images/dwicon.png"></image>
        </view>
      </picker>
    </view>
  </view>

  <view class="content-box">
    <!-- <template is="multifunc" data="{{multifunc,menuIndex}}"></template> -->
    <view v-for="(item, index) in modelData" :key="index" style="margin:0 36rpx;">
      <view class="model-title" v-if="item.title">
        <image src="/static/images/sys/xf_icon2.png"></image>
        <text>{{item.title}}</text>
      </view>
      <block v-for="(model, index2) in item.model" :key="index2">
        <!-- 下行template对应的wxml不存在，无法替换，代码已注释 -->
<!-- <template :is="model.name" :data="item,model,menuIndex, rukouIndex"></template>-->

      </block>
       <!-- <template is="tab" data="{{model}}"></template> -->
    </view>

    <!-- 资讯 -->
    <view class="zx-box" v-if="keywords && articleData">
      <view class="zxqiehuan">
        <view v-for="(item, index) in keywords" :key="index" class="zx-title-items" @tap="zxtitleBtn" :data-title="item" :data-index="index">
          <text :class="titleIndex==index?'sel-title':'nosel-title'">{{item}}</text>
          <view class="hline" v-if="titleIndex==index"></view>
        </view>
      </view>
      <view class="zx-content">
        <navigator v-for="(item, index) in articleData" :key="index" class="item-content" :url="'/pages/article/detail/detail?id=' + item.id + '&type=' + item.pagetype + '&city=' + citycode">
          <view class="zx-flex-row">
            <image class="doticon" src="/static/images/sys/doubledot.png"></image>
            <view class="zx-text">{{item.title}}</view>
          </view>
          <view class="timetext">{{item.publictime}}</view>
        </navigator>
      </view>
    </view>
  </view>
  <view class="fgx"></view>
  <fangyiTools id="fangyiTools"></fangyiTools>
  <view class="fgx"></view>
  <!-- 导粉 -->
  <view class="daofen" v-if="daofen">
    <rich-text :nodes="daofen.content" style="user-select:text;-webkit-user-select:text">
    </rich-text>
  </view>
</view>

<subscribeMessage :city="city" :text="infoData.msg" :name="infoData.name" :action="action" v-if="infoData.msg"></subscribeMessage>

<!-- 快捷导航 -->
<!-- <fastnav qrcodeimg="{{qrcodeimg}}" citycode="{{citycode}}" showNav="{{showNav}}" showShare="{{showShare}}"></fastnav> -->
</view>
</template>

<script>
// pages/topicality/zhuanti/zhuanti.js
const app = getApp();
const util = require("../../../utils/util.js");
var QQMapWX = require("../../../utils/qqmap-wx-jssdk1.2/qqmap-wx-jssdk.min.js");
var qqmapsdk = new QQMapWX({
  key: 'KR7BZ-XSQ3P-VGFD7-LNRZL-E7PXE-STF76'
});
import fastnav from "../../../component/fastnav/fastnav";
import subscribeMessage from "../../../component/subscribeMessage/subscribeMessage";
import fangyiTools from "../../../component/fangyiTools/fangyiTools";

export default {
  data() {
    return {
      citycode: "hz",
      city: '杭州',
      province: '浙江',
      pindex: 0,
      cindex: 0,
      cityPick: ["选择城市"],
      showtk: false,
      showNav: true,
      // 快捷导航是否展开
      showShare: true,
      // 显示分享按钮
      menuIndex: 0,
      rukouIndex: 0,
      titleIndex: 0,
      needSubscribeMessage: false,
      provPick: [],
      modelData: [],
      keywords: [],
      articleData: [],
      daofen: false,
      action: "",
      qrcodeimg: "",
      cityArray: "",
      citylist: "",
      infoData: ""
    };
  },

  components: {
    fastnav,
    subscribeMessage,
    fangyiTools
  },
  props: {},

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {
    var sceneData = [];

    if (options.scene != undefined) {
      var scene = decodeURIComponent(options.scene);
      var arrPara = scene.split("/");

      for (var i in arrPara) {
        sceneData.push(arrPara[i]);
      }
    }

    this.setData({
      citycode: sceneData[0] ? sceneData[0] : options.city ? options.city : this.citycode,
      action: sceneData[1] ? sceneData[1] : options.action ? options.action : ''
    });
    this.setData({
      needSubscribeMessage: util.getName(this.action)
    });
    util.getUrl(app.globalData.url).then(res => {
      this.getProvinceData(this.citycode);
    });
  },

  /**
   * 用户点击右上角分享
   */
  onShareAppMessage: function () {
    return {
      title: this.infoData ? this.infoData.title : "专题"
    };
  },
  // 分享朋友圈
  onShareTimeline: function () {
    return {
      title: this.infoData ? this.infoData.title : "专题",
      imageUrl: "http://imgbdb3.bendibao.com/xcx/20205/20/2020520151108_56661.jpg",
      query: {
        city: this.citycode,
        action: this.action
      }
    };
  },
  methods: {
    // 获取定位
    getLocation() {
      qqmapsdk.reverseGeocoder({
        success: res => {
          let city = res.result.address_component.city; // let city="芜湖市";

          let citydata = this.citylist.filter(v => {
            if (city.indexOf(v.cityname) != -1) {
              return v;
            }
          });

          if (citydata != '' && city.indexOf(this.city) == -1) {
            // wx.showModal({
            //     content: '您当前定位城市为' + city + '\n是否需要切换到' + city,
            //     success: res => {
            //         if (res.confirm) {
            this.setData({
              city: Array.isArray(citydata) ? citydata[0].cityname : this.city,
              citycode: Array.isArray(citydata) ? citydata[0].citycode : this.citycode,
              province: Array.isArray(citydata) ? citydata[0].province : this.province,
              cityPick: ["选择城市"]
            });
            let clist = [];
            this.provPick.forEach((v, k) => {
              if (v == this.province) {
                this.setData({
                  pindex: k
                });
              }
            });
            this.cityArray[this.pindex].citylist.forEach(v => {
              clist.push(v.cityname);
            });
            this.setData({
              cityPick: this.cityPick.concat(clist)
            });
            this.cityPick.forEach((v, k) => {
              if (v == this.city) {
                this.setData({
                  cindex: k
                });
              }
            }); // 获取城市公众号二维码

            this.getQrcode(this.citycode);
            this.getInfoData(this.citycode); //         }
            //     }
            // })
          }
        }
      });
    },

    // 获取城市公众号二维码
    getQrcode(citycode) {
      util.cityConfig(citycode).then(res => {
        this.setData({
          qrcodeimg: res.qrcode
        });
      });
    },

    // 获取城市
    getProvinceData(optcode) {
      let data = {
        action: this.action,
        type: "city"
      };
      util.request('zhuanti_all.php', data, 'POST').then(res => {
        this.setData({
          cityArray: res.data.data.city
        });
        let provPick = [];
        let citylist = [];
        let clist = [];
        this.cityArray.forEach(v => {
          v.citylist.forEach(v => {
            citylist.push(v);
          });
          provPick.push(v.province);
          this.setData({
            provPick,
            citylist
          });
        });

        if (this.citylist) {
          this.citylist.forEach((v, k) => {
            if (optcode == v.citycode) {
              this.setData({
                citycode: v.citycode,
                city: v.cityname,
                province: v.province
              });
            } else {
              this.setData({
                citycode: this.citycode,
                city: this.city,
                province: this.province
              });
            }
          });
        }

        this.provPick.forEach((v, k) => {
          if (v == this.province) {
            this.setData({
              pindex: k
            });
          }
        });
        this.cityArray[this.pindex].citylist.forEach(v => {
          clist.push(v.cityname);
        });
        this.setData({
          cityPick: this.cityPick.concat(clist)
        });
        this.cityPick.forEach((v, k) => {
          if (v == this.city) {
            this.setData({
              cindex: k
            });
          }
        }); // 获取城市公众号二维码

        this.getQrcode(this.citycode);
        this.getInfoData();

        if (this.citylist != "" && Array.isArray(this.citylist)) {
          // 获取定位
          this.getLocation();
        }
      });
    },

    getInfoData(citycode) {
      let data = {
        action: this.action,
        type: "city",
        citycode: citycode ? citycode : this.citycode
      };
      util.request('zhuanti_all.php', data, 'POST').then(res => {
        this.selectComponent("#fangyiTools").getTools(this.cityCode);
        let infodata = res.data.data;

        if (res.data.data.daofen) {
          res.data.data.daofen.content = res.data.data.daofen.content.replace(/<p([\s\w"=\/\.:;]+)((?:(="[^"]+")))/ig, '<p').replace(/<p([\s\w"=\/\.:;]+)((?:(style="[^"]+")))/ig, '<p').replace(/<p([\s\w"=\/\.:;]+)((?:(class="[^"]+")))/ig, '<p').replace(/<p>/ig, '<p class="p_class">').replace(/<img([\s\w"-=\/\.:;]+)((?:(style="[^"]+")))/ig, '<img$1').replace(/<img/gi, '<img style="width:100%;height:auto"'); // .replace(/<span>/ig, '<p class="p_class">')
        }

        uni.setNavigationBarTitle({
          title: res.data.data.title
        });

        if (infodata.list) {
          infodata.list.forEach((item, index) => {
            if (item.hasOwnProperty("model")) item.model.forEach((v, k) => {
              if (v.name === "rukou" && v.data) {
                v.data.forEach((m, n) => {
                  if (n == 0) {
                    m.checked = true;
                  } else {
                    m.checked = false;
                  }
                });
              } else if (v.name === "multirukou" && v.data) {
                v.data.forEach(item => {
                  if (item.list) item.list.forEach((rukou, rukouindex) => rukou.checked = rukouindex == 0 ? true : false);
                });
              } else if (v.name === "article" && v.data) {
                if (v.data.length > 3) {
                  this.articleList = JSON.parse(JSON.stringify(v.data));
                  v.data = v.data.splice(0, 3);
                  v.more = true;
                }
              }
            });
          });
        }

        this.setData({
          infoData: res.data.data,
          // lunbotu: res.data.data.lunbotu,
          // func: res.data.data.func,
          // multifunc: res.data.data.multifunc,
          // rukou: res.data.data.rukou,
          modelData: res.data.data.list,
          keywords: res.data.data.keyword,
          daofen: res.data.data.daofen
        });
        util.reportMessage("fangwenliang", {
          action: this.infoData.name
        });
        this.getzixunData(this.keywords[0]);
      });
    },

    moreArticle(e) {
      this.modelData.forEach(item => {
        if (item.model[0].name == 'article' && item.model[0].data) {
          if (JSON.stringify(item.model[0].data.sort()) == JSON.stringify(e.currentTarget.dataset.arr.sort())) {
            item.model[0].more = false;
            item.model[0].data = this.articleList;
          }
        }
      });
      this.setData({
        modelData: this.modelData
      });
    },

    // 省份选择
    bindProv: function (e) {
      this.setData({
        pindex: e.detail.value,
        cindex: 0,
        cityPick: ["选择城市"]
      });
      let clist = [];
      this.cityArray[this.pindex].citylist.forEach(v => {
        clist.push(v.cityname);
      });
      this.setData({
        cityPick: this.cityPick.concat(clist)
      });
    },
    // 省份选择
    bindProv: function (e) {
      this.setData({
        pindex: e.detail.value,
        cindex: 0,
        cityPick: ["选择城市"]
      });
      let clist = [];
      this.cityArray[this.pindex].citylist.forEach(v => {
        clist.push(v.cityname);
      });
      this.setData({
        cityPick: this.cityPick.concat(clist)
      });
    },

    // 城市选择
    bindCity(e) {
      this.setData({
        cindex: e.detail.value
      });
      let cityname = this.cityPick[this.cindex];

      if (this.citylist) {
        this.citylist.forEach(v => {
          if (v.cityname == cityname) {
            let citycode = v.citycode;
            this.setData({
              citycode,
              city: cityname
            });
          }
        });
      } // 获取城市公众号二维码


      this.getQrcode(this.citycode);
      this.getInfoData(this.citycode);
    },

    // 功能类（多项切换）菜单点击
    menuClick(e) {
      let menuIndex = e.currentTarget.dataset.index;
      this.setData({
        menuIndex
      });
    },

    multiRukou(e) {
      let rukouIndex = e.currentTarget.dataset.index;
      this.setData({
        rukouIndex
      });
    },

    navDetail(e) {
      let id = e.currentTarget.dataset.id;
      let citycode = e.currentTarget.dataset.citycode;
      let url = e.currentTarget.dataset.url;
      let type = e.currentTarget.dataset.type;
      let title = e.currentTarget.dataset.title;

      if (id && id != 0) {
        uni.navigateTo({
          url: '/pages/article/detail/detail?id=' + id + '&type=' + type + '&city=' + (citycode ? citycode : this.citycode)
        });
      } else {
        if (url) {
          if (url.indexOf("mp.weixin.qq.com") != -1) {
            uni.navigateTo({
              url: '/pages/webview/webview?path=' + encodeURIComponent(url)
            });
          } else {
            this.setData({
              showtk: true
            });
            util.navContact(title, url);
          }
        }
      }
    },

    // 入口展开收起
    rukouChecked(e) {
      let name = e.currentTarget.dataset.name;
      let checked = e.currentTarget.dataset.checked;
      this.modelData.forEach((item, index) => {
        if (item.hasOwnProperty("model") && Array.isArray(item.model)) item.model.forEach((v, k) => {
          if (v.name === "rukou") {
            if (v.data) {
              v.data.forEach((m, n) => {
                if (name == n) {
                  m.checked = !checked;
                }
              });
            }
          }
        });
      });
      this.setData({
        modelData: this.modelData
      });
    },

    moreRukouChecked(e) {
      let index = e.currentTarget.dataset.index;
      let checked = e.currentTarget.dataset.checked;

      try {
        if (this.modelData[1] && this.modelData[1].hasOwnProperty("model")) this.modelData[1].model[0].data[this.rukouIndex].list[index].checked = !checked;
      } catch (err) {} // this.data.modelData.forEach((item, index) => {
      //     item.model.forEach((v, k) => {
      //         if (v.name === "multirukou") {
      //             v.data.forEach((m, n) => {
      //                 if (m.list)
      //                     m.list.forEach((item, idx) => {
      //                         if (idx != index)
      //                             item.checked = false;
      //                     });
      //             });
      //         }
      //     });
      // });


      this.setData({
        modelData: this.modelData
      });
    },

    zxtitleBtn(e) {
      let keywords = e.currentTarget.dataset.title;
      let titleIndex = e.currentTarget.dataset.index;
      this.setData({
        titleIndex
      });
      this.getzixunData(keywords);
    },

    // 获取资讯
    getzixunData(keywords) {
      util.inforMation(this.citycode, keywords).then(res => {
        this.setData({
          articleData: res
        });
      });
    },

    // 进入客服会话
    contact() {
      this.setData({
        showtk: false
      });
    },

    // 关闭
    close() {
      this.setData({
        showtk: false
      });
    },

    /**
     * 页面滑动事件的处理函数
     */
    onPageScroll: function (e) {
      this.setData({
        showNav: false
      });
    }
  }
};
</script>
<style>
/* pages/topicality/zhuanti/zhuanti.wxss */

.main-img {
    width: 100%;
    height: 276rpx;
}

.city-box {
    background: #fff;
    border-radius: 35rpx;
    padding: 10rpx 30rpx;
    position: absolute;
    top: 40rpx;
    right: 30rpx;
    display: flex;
    align-items: center;
}

.city-box text {
    font-size: 30rpx;
    font-weight: bolder;
}

.city-box image {
    width: 23rpx;
    height: 15rpx;
    margin-left: 10rpx;
}

.change-city {
    background: rgba(255, 255, 255, 1);
    box-shadow: 0rpx 6rpx 6rpx rgba(0, 0, 0, 0.16);
    opacity: 1;
    border-radius: 20rpx;
    padding: 30rpx 0rpx;
    position: absolute;
    top: 235rpx;
    width: 90%;
    margin-left: 36rpx;
    display: flex;
    align-items: center;
}

.change-city text {
    font-size: 28rpx;
    font-family: PingFang SC;
    font-weight: bold;
    line-height: 36rpx;
    color: rgba(20, 20, 20, 1);
    opacity: 1;
    width: 102rpx;
    text-align: center;
    white-space: nowrap;
}

.sel-city {
    display: flex;
    align-items: center;
    margin-left: 80rpx;
}

.sel-city image {
    width: 19rpx;
    height: 10rpx;
    margin-left: 15rpx;
}

.content-box {
    margin: 80rpx 0rpx;
}

.model-1 {
    margin: 20rpx 0;
}

.model-1 view {
    user-select: text;
    -webkit-user-select: text;
}

.model-title {
    display: flex;
    align-items: center;
    flex-direction: row;
}

.model-title image {
    width: 18rpx;
    height: 26rpx;
    margin-right: 15rpx;
}

.model-title text {
    font-size: 32rpx;
    font-family: PingFang SC;
    font-weight: bold;
    line-height: 44rpx;
    color: rgba(20, 20, 20, 1);
    opacity: 1;
}

.tips-box {
    margin-top: 30rpx;
}

.tips {
    background-color: #f2f4fc;
    border-radius: 20rpx;
    padding: 30rpx;
    margin-bottom: 30rpx;
}


/* .tips:nth-of-type(n+3) {
    display: none;
} */

.tips image {
    width: 28rpx;
    height: 32rpx;
    margin-right: 15rpx;
}

.tips text {
    color: #5195dd;
    font-size: 28rpx;
    font-weight: 500;
}

.tips .title {
    display: flex;
    flex-direction: row;
    align-items: flex-start;
}

.tips .text {
    margin-top: 10rpx;
    font-size: 30rpx;
    color: rgb(102, 102, 102);
}

.tips1 {
    background-color: #f2f4fc;
    border-radius: 20rpx;
    padding: 30rpx;
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    margin-bottom: 30rpx;
}

.tips1 image {
    width: 32rpx;
    height: 32rpx;
    margin-right: 30rpx;
}

.tips1 text {
    color: #5195dd;
    font-size: 28rpx;
    font-weight: 500;
}


/* 功能类多项切换 */

.model-2 {
    margin: 20rpx 0;
}

.multifunc-box {
    margin: 15rpx 30rpx;
}

.multifunc {
    display: flex;
    align-items: center;
    flex-direction: row;
    justify-content: space-between;
}

.func1 {
    padding: 10rpx 20rpx;
    font-size: 30rpx;
    font-family: PingFang SC Medium, PingFang SC Medium-Medium;
    font-weight: 500;
    text-align: center;
    color: #000;
}

.func2 {
    padding: 15rpx 20rpx;
    font-size: 30rpx;
    font-family: PingFang SC Medium, PingFang SC Medium-Medium;
    font-weight: 500;
    text-align: center;
    color: #5095dd;
    border-bottom: 5rpx solid #5095dd;
}

.rukou-box {
    display: flex;
    flex-direction: row;
    align-items: center;
    flex-wrap: wrap;
    margin: 30rpx 0;
}

.rukou {
    background: #f2f4fc;
    border-radius: 39rpx;
    font-size: 28rpx;
    font-weight: 500;
    text-align: center;
    font-family: PingFang SC Bold, PingFang SC Bold-Bold;
    color: #5095dd;
    line-height: 42rpx;
    padding: 25rpx 0rpx;
    width: 288rpx;
    margin-right: 30rpx;
    margin-bottom: 30rpx;
}

.rukou:nth-child(2n) {
    margin-right: 0;
}

.block-box {
    margin-top: 30rpx;
}

.block-items {
    background: #f5f3fe;
    border-radius: 20rpx;
    padding: 30rpx 40rpx;
}

.block-title {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
}

.block-title text {
    font-size: 28rpx;
    color: #000;
}

.block-title image {
    width: 50rpx;
    height: 50rpx;
}

.block {
    margin-top: 15rpx;
}

.block-text {
    display: flex;
    flex-direction: row;
    margin-bottom: 15rpx;
}

.bl-title {
    font-size: 26rpx;
    font-family: PingFang SC;
    font-weight: bold;
    line-height: 36rpx;
    color: rgba(20, 20, 20, 1);
    opacity: 1;
    white-space: nowrap;
    margin-right: 38rpx;
}

.bl-text {
    border-bottom: 1rpx solid rgba(236, 236, 236, 1);
    opacity: 1;
    padding-bottom: 26rpx;
    font-size: 26rpx;
    font-family: PingFang SC;
    font-weight: 500;
    line-height: 36rpx;
    color: rgba(90, 90, 90, 1);
    flex: 1;
    word-break: break-all;
}

.block-btn-box {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    margin-top: 25rpx;
}

.block-btn {
    background-color: #dbe5f8;
    padding: 20rpx 40rpx;
    border-radius: 38rpx;
    font-size: 26rpx;
    font-family: PingFang SC;
    font-weight: bold;
    line-height: 36rpx;
    color: rgba(81, 149, 221, 1);
    opacity: 1;
    white-space: nowrap;
}

.model-3 {
    margin: 20rpx 0;
}

.model-4 {
    margin: 20rpx 0;
}

.imgswiper {
    width: 100%;
    height: 280rpx;
    border-radius: 30rpx;
}


/* 资讯 */

.zx-box {
    padding: 30rpx 36rpx;
    border-top: 15rpx solid #f5f5f5;
    margin-top: 40rpx;
}

.zx-title {
    display: flex;
    align-items: center;
    flex-direction: row;
}

.zx-title image {
    width: 18rpx;
    height: 26rpx;
    margin-right: 15rpx;
}

.zx-title text {
    font-size: 32rpx;
    font-family: PingFang SC;
    font-weight: bold;
    line-height: 44rpx;
    color: rgba(20, 20, 20, 1);
    opacity: 1;
}

.zxqiehuan {
    display: flex;
    flex-direction: row;
    align-items: center;
    border-bottom: 1rpx solid rgb(238, 238, 238);
    padding: 0 30rpx;
}

.zx-title-items {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-right: 98rpx;
}

.zx-title-items:last-child {
    margin-right: 0;
}

.hline {
    width: 50rpx;
    height: 5rpx;
    border-radius: 100rpx;
    background-color: #000;
}


/* .hline{border-radius: 80rpx;border: 3rpx solid #000;width: 40rpx;} */

.zx-text {
    font-size: 30rpx;
    color: #000;
    font-weight: bold;
}

.sel-title {
    color: #141414;
    font-size: 32rpx;
    font-weight: 600;
    margin-bottom: 15rpx;
}

.nosel-title {
    color: #5b5b5b;
    font-size: 32rpx;
    font-weight: 500;
    margin-bottom: 20rpx;
}


/*white-space:nowrap;  */

.zx-flex-row {
    display: flex;
    align-items: flex-start;
}

.doticon {
    width: 24rpx;
    height: 16rpx;
    margin-right: 15rpx;
    margin-top: 10rpx;
}

.item-content {
    display: flex;
    flex-direction: column;
    border-bottom: 1rpx solid #ccc;
    padding: 30rpx 0;
}

.timetext {
    font-size: 26rpx;
    font-family: PingFang SC;
    font-weight: 500;
    color: rgba(152, 150, 150, 1);
    opacity: 1;
    margin-top: 20rpx;
    margin-left: 40rpx;
}


/* tab */

.tab-box {
    padding: 30rpx 40rpx;
    background: #f5f3fe;
    border-radius: 30rpx;
    margin: 30rpx 0;
}

.tab-title {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
}

.tab-title text {
    font-size: 26rpx;
    font-family: PingFang SC Medium, PingFang SC Medium-Medium;
    font-weight: 500;
    text-align: center;
    color: #999;
    line-height: 77rpx;
}

.tab-list {
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    justify-content: space-between;
}

.tab-items {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.tab-items .title {
    font-size: 28rpx;
    font-family: PingFang SC Medium, PingFang SC Medium-Medium;
    font-weight: 500;
    text-align: center;
    color: #999;
    line-height: 77rpx;
}

.tab-items .content {
    font-size: 28rpx;
    font-family: PingFang SC Medium, PingFang SC Medium-Medium;
    font-weight: 500;
    text-align: center;
    color: #333;
    /* line-height: 77rpx; */
    margin: 15rpx 2rpx;
    /* width: 140rpx; */
}


/* 导粉 */

.daofen {
    margin: 50rpx 30rpx 80rpx 30rpx;
    text-align: center;
}

.p_class {
    margin: 10rpx 30rpx;
    line-height: 50rpx;
}

.more {
    width: 45%;
    height: 90rpx;
    margin: 0 auto;
    line-height: 90rpx;
    text-align: center;
    color: #000000;
    border-radius: 14rpx;
    background-color: #F0EDF1;
}

</style>